<template>

  <div class="main-border">
    <el-table
        :data="Order"
        stripe
        style="width: 100%;color: #5a5c61;">
      <el-table-column
          prop="orderNumber"
          label="订单号"
          show-overflow-tooltip
          width="200">
      </el-table-column>
      <el-table-column
          prop="teaItem.teaName"
          label="茶物品名称"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          prop="orderPrice"
          label="金额"
          show-overflow-tooltip
          min-width="100"
          width="100">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          min-width="150"
          width="200">
      </el-table-column>
      <el-table-column
          label="订单状态"
          width="100"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{ orderStatus[scope.row.orderStatus] }}</div>
        </template>
      </el-table-column>
      <el-table-column
          label="支付状态"
          width="100"
          show-overflow-tooltip
          class="cell el-tooltip">
        <template slot-scope="scope">
          <div>{{ paymentStatus[scope.row.paymentStatus] }}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="paymentWay"
          label="支付方式"
          width="100"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="paymentTime"
          label="支付时间"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.paymentStatus == 1 & scope.row.orderStatus==1"
              size="mini"
              type="danger"
              @click="fahuo(scope.$index)">发货
          </el-button>
          <el-button
              v-if="scope.row.paymentStatus == 1 & scope.row.orderStatus==2"
              size="mini"
              type="danger"
              @click="quxiaofahuo(scope.$index)">取消发货
          </el-button>
          <!--          <el-button-->
          <!--              size="mini"-->
          <!--              type="danger"-->
          <!--              @click="deleteOrder(scope.$index)">删除-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="8"
          background
          layout="prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderList",
  created() {
    this.getOrder();
  },
  methods: {
    getOrder() {
      this.$api.getOrderList({
        page: this.nowPage,
        nums: 8
      }).then(res => {
        if (res.status_code == 1) {
          this.Order = res.data.list;
          this.total = res.data.count;
        } else {
          this.$message.error(res.msg)
        }

      }).catch(e => {
        console.log(e)
      })
    },
    deleteOrder(index) {
      this.$api.deleteOrder({
        id: this.Order[index].id
      }).then(res => {
        if (res.status_code == 1) {
          this.getOrder();
        } else {
          this.$message.error(res.msg)
        }

      }).catch(e => {
        console.log(e)
      })
    },
    handleCurrentChange(val) {
      this.nowPage = val;
      this.getOrder();
    },
    fahuo(index) {
      this.$api.updateOrder({
        id: this.Order[index].id,
        orderStatus: 2
      }).then(res => {
        console.log(res);
        this.getOrder();
      })
    },
    quxiaofahuo(index) {
      this.$api.updateOrder({
        id: this.Order[index].id,
        orderStatus: 1
      }).then(res => {
        console.log(res);
        this.getOrder();
      })
    }
  },
  data() {
    return {
      mode: 1,
      nowPage: 1,
      total: 0,
      paymentStatus: ['未支付', '已支付'],
      orderStatus: ['待付款', '待发货', '待收货', '已完成', '已取消'],
      Order: []
    }
  },
}
</script>

<style scoped>
.main-border {
  background-color: #FFF;
  padding: 10px 30px;
  box-shadow: 0 1px 15px -6px rgba(0, 0, 0, .5);
  border-radius: 5px;
}

.block {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 10px;
  width: 100%;
}
</style>